🧭 Coding 3: React Router with Single Page — TaskPage

🎯 Objective:

Set up React Router in your Vite + React + TypeScript project with only one page: TaskPage.

---

🧰 Tools:

• react-router (official routing library)

---

🛠️ A. Install React Router

npm i react-router

---

🧱 B. Wrap App with <BrowserRouter>

Edit src/main.tsx:

import React from "react"
import ReactDOM from "react-dom/client"
import { BrowserRouter } from "react-router"
import App from "./App"
import "./styles.css"

const root = document.getElementById("root")!

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
)

---

🗂️ C. Create Task Page

Create the file:

mkdir src/pages
touch src/pages/TaskPage.tsx

Add this content to TaskPage.tsx:

export default function TaskPage() {
  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold text-blue-600">Task Management Page</h1>
      <p className="mt-2 text-gray-600">This is where we will add, update, and list tasks.</p>
    </div>
  )
}

---

🧭 D. Set Up Routing in App.tsx

import { Routes, Route } from "react-router"
import TaskPage from "./page/TaskPage"

export default function App() {
  return (
    <div className="p-4">
      <Routes>
        <Route path="/" element={<TaskPage />} />
      </Routes>
    </div>
  )
}

---

✅ Now You Have:

• react-router installed
• A single routed page: / → TaskPage
• Page ready for CRUD operations

---